<template>
    <div v-if="total" class="Pagination">
        <el-Pagination
            :current-page="pageNo"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :layout="layout"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue';

const emits = defineEmits(['changePage', 'changePageSize']);

const props = defineProps({
    pageNo: {
        type: Number,
        default: 1,
    },
    pageSizes: {
        type: Array,
        default: () => [10, 20, 30, 40, 100],
    },
    total: {
        type: Number,
        default: 0,
    },
    pageSize: {
        type: Number,
        default: 10,
    },
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper',
    },
});
const handleCurrentChange = (page: number): void => {
    emits('changePage', page);
};
const handleSizeChange = (pageSize: number): void => {
    emits('changePageSize', pageSize);
};
</script>

<style lang="scss" scoped>
.Pagination {
    width: 100%;
    display: flex;
    justify-content: right;
    margin-top: 20px;
}
</style>
